<template>
    <div class="forgetPassword">
        <div class="resetTitle">
            <router-link tag="div" to="/login" class="imgs"><span class="iconfont icon-fanhui"></span></router-link>
            <div class="resetText">重置密码</div>
        </div>
        <div class="rivise">
            <van-form @submit="onSubmit(form)">

                <van-field
                        v-model="form.password"
                        name="新密码"
                        label="新密码"
                        placeholder="请输入"
                        :rules="[rules.password]"
                />
                <van-field
                        v-model="form.resetPassword"
                        name="重复新密码"
                        label="重复新密码"
                        placeholder="请输入"
                        :rules="[{ passwordValidator, message: '两次密码输入不匹配' }]"
                />
                <van-field
                        v-model="form.phone"
                        type="text"
                        name="手机号"
                        label="手机号"
                        placeholder="请输入"
                        :rules="[rules.phone]"
                />
                <van-field
                        v-model="form.verifyCode"
                        type="text"
                        name="验证码"
                        label="验证码"
                        placeholder="请输入"
                        :rules="[{ required: true, message: '请填写验证码' }]"
                >
                    <template #button>
                        <van-button native-type="button" @click="requireCode" id="time">获取验证码</van-button>
                    </template>
                </van-field>
                <div class="sub">
                    <van-button round block type="info" native-type="submit">进行重置</van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script>
    import {rules} from '@/utils/common'
    import comApi from '@/api/comapi'
    import user from '@/api/user'
    import {Toast} from 'vant';

    export default {
        name: "forgetPassword",
        data() {
            return {
                form: {
                    // username: '',
                    password: '',
                    phone: '',
                    verifyCode: '',
                    resetPassword: ''
                },
                rules: rules,
            }
        },
        methods: {
            // clickCodeNum(){
            //
            // },
            // resetButton(){
            //
            // }
            // 校验函数返回 true 表示校验通过，false 表示不通过
            passwordValidator(val) {
                debugger
                return val == this.form.password;
            },
            getVerify(phone) {
                comApi.getPhoneCaptcha(phone).then(res => {
                })
            },
            requireCode() {
                if (this.form.phone == '') {
                    Toast('请输入手机号');
                    return
                }
                this.getVerify(this.form.phone)
                var el = document.getElementById('time')
                el.setAttribute('disabled', 'disabled')
                var times = 60;

                var sec = setInterval(function () {
                    document.querySelector("#time").innerHTML = times + "秒";
                    if (times === 0) {
                        times = 60
                        clearInterval(sec)
                        el.removeAttribute('disabled')
                        document.querySelector("#time").innerHTML = '获取验证码';
                        return
                    }
                    times--;
                }, 1000)


            },
            onSubmit(values) {

                delete values.resetPassword
                user.updatePasswod(values).then(res=>{
                    Toast('成功')
                    this.$router.push({
                        path:'/login'
                    })

                })
            },
        },
        created() {

        }
    }
</script>

<style lang="less" scoped>
    .gorgetPassword {
        height: 100%;
        width: 100%;
        background: #f8f8f8;
    }

    .resetTitle {
        width: 100%;
        padding: 15px 0;
        position: relative;

        .imgs {
            position: absolute;
            left: 10px;
            top: 13px;

            span {
                font-size: 25px;
            }
        }

        .resetText {
            width: 100%;
            text-align: center;
            font-weight: bold;
            font-size: 16px;
        }
    }

    .rivise {
        width: 100%;
        background: #ffffff;

        /deep/ .van-button--default {
            width: 100px;
            text-align: center;
            outline: none;
            border: none;
            background: #f8f5be;
            height: 30px;
        }

        /*ul{*/
        /*    width: 100%;*/
        /*    li{*/
        /*        width: 100%;*/
        /*        border-bottom: 1px solid #e9e9e9;*/
        /*        .riviseLis{*/
        /*            padding: 10px;*/
        /*            display: flex;*/
        /*            align-items: center;*/
        /*            p{*/
        /*                line-height: 30px;*/
        /*            }*/
        /*            .ipt{*/
        /*                flex: 1;*/
        /*                input{*/
        /*                    height: 30px;*/
        /*                    width: 100%;*/
        /*                    text-indent: 20px;*/
        /*                    outline: none;*/
        /*                    border: none;*/
        /*                }*/
        /*            }*/
        /*        }*/
        /*        .riviseLis5{*/
        /*            display: flex;*/
        /*            align-items: center;*/
        /*            padding: 10px;*/
        /*            .iptLeft{*/
        /*                flex: 1;*/
        /*                padding: 0;*/
        /*            }*/
        /*            .code{*/
        /*                padding: 5px;*/
        /*                border-radius: 5px;*/
        /*                color: white;*/
        /*                background: #f8f5be;*/
        /*            }*/
        /*        }*/
        /*    }*/
        /*}*/

        .sub {
            width: 100%;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: #ffffff;
            padding-bottom: 10px;

            .van-button {
                width: 95%;
                margin: 0 auto;
                color: black;
                background: #f8f5be;
                border: none;
            }
        }
    }

    /*.resetBut{*/
    /*    width: 100%;*/
    /*    background: white;*/
    /*    position: fixed;*/
    /*    left: 0;*/
    /*    bottom: 0;*/
    /*    padding-bottom: 10px;*/
    /*    .button{*/
    /*        color: white;*/
    /*        margin: 0 auto;*/
    /*        width: 90%;*/
    /*        border-radius: 30px;*/
    /*        height: 40px;*/
    /*        line-height: 40px;*/
    /*        text-align: center;*/
    /*        background: #f8f5be;*/
    /*    }*/

    /*}*/
</style>
